<template>
    <div>
        <!-- 导航栏高度60px，行距60px，背景色#242526，padding: 0 15px -->
        <!-- sticky定位，top-0固定到顶部，参考：https://blog.csdn.net/JiangLittleBai/article/details/108653463 -->
        <div class="h-[60px] leading-[60px] bg-[#242526] px-[15px] sticky top-0">
            <!-- flex布局，左右2个大盒子两端对齐，垂直居中 -->
            <div class="flex justify-between items-center">
                <!-- 左边大盒子有3个子元素 -->
                <div class="flex flex-row text-[16px]">
                    <div class="w-[135px] h-[60px] flex items-center cursor-pointer">
                        <el-image src="https://wails.io/zh-Hans/img/wails-logo-horizontal-dark.svg" />
                    </div>
                    <!-- cursor-pointer就是鼠标放到元素上，变成手型图标 -->
                    <div class="ml-[35px] flex flex-row cursor-pointer text-[#dfdedf] hover:text-red-500">
                        <!-- hover:text-red-500，鼠标放上面变红色字体 -->
                        <div>v2.7.0</div>
                        <div class="ml-[2px] mt-[2px]">
                            <el-icon><CaretBottom /></el-icon>
                        </div>
                    </div>
                    <div class="ml-[35px] flex flex-row cursor-pointer text-[#dfdedf] hover:text-red-500">
                        <div>赞助我们</div>
                        <div class="text-red-500 ml-[5px] mt-[3px]">
                            <el-icon><Opportunity /></el-icon>
                        </div>
                    </div>
                </div>
                <!-- 右边大盒子有7个子元素 -->
                <div class="flex flex-row text-[#dfdedf]">
                    <div class="cursor-pointer hover:text-red-500">文档</div>
                    <div class="ml-[25px] cursor-pointer hover:text-red-500">博客</div>
                    <div class="ml-[25px] flex flex-row cursor-pointer hover:text-red-500">
                        <div class="text-[16px]">关于</div>
                        <div class="ml-[2px] mt-[2px]">
                            <el-icon><CaretBottom /></el-icon>
                        </div>
                    </div>
                    <div class="ml-[25px] flex flex-row cursor-pointer hover:text-red-500">
                        <div class="text-[16px]">简体中文(79%)</div>
                        <div class="ml-[2px] mt-[2px]">
                            <el-icon><CaretBottom /></el-icon>
                        </div>
                    </div>
                    <div class="ml-[25px] flex flex-row cursor-pointer hover:text-red-500">
                        <div class="text-[16px]">GitHub</div>
                        <div class="ml-[2px] mt-[2px]">
                            <el-icon><Share /></el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间部分2个大盒子：文字+轮播图，横排，水平around -->
        <div class="px-[15px] h-[550px] bg-[#1B1B1D] text-[#fff] flex flex-row justify-center items-center">
            <!-- 大盒子1，竖排，水平居中，垂直居中 -->
            <div class="flex flex-col justify-center items-center">
                <div class="text-[24px]">使用 Go 构建漂亮的跨平台应用程序</div>
                <!-- 按钮，水平居中 -->
                <div class="flex flex-row mt-[25px]">
                    <div>
                        <button
                            class="bg-[#1B1B1D] text-[#E3E3E3] text-[20px] border border-white border-solid hover:text-red-500 hover:border-red-500 px-[35px] py-[7px] rounded-[6px]"
                        >
                            学到更多
                        </button>
                    </div>
                    <div class="ml-[35px]">
                        <button
                            class="text-[20px] bg-[#DF0000] hover:bg-[#9C0000] active:bg-[#780000] px-[35px] py-[7px] rounded-[6px]"
                        >
                            快速入门
                        </button>
                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="w-[660px] ml-[210px]">
                <el-carousel height="430px">
                    <el-carousel-item v-for="v in swiperList" :key="v" indicator-position="none">
                        <img :src="v.url" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!-- 文字区 -->
        <div class="text-[#fff] text-[22px] bg-[#1B1B1D] pt-[35px] flex justify-center">
            <div class="w-[1300px]">
                Wails v2 turns what used to be tedious and painful into a delightfully simple process. Use the tools you
                know to create cross-platform desktop apps. Everyone wins!
            </div>
        </div>
        <!-- 介绍区，横排，内层限定宽度水平around居中，外层水平居中 -->
        <div class="mt-100px text-[#fff] text-[22px] bg-[#1B1B1D] pt-[100px] pb-[60px] flex justify-center">
            <div class="flex flex-row justify-around w-[1400px]">
                <div class="flex flex-col justify-center items-center" v-for="v in introduceList" :key="v">
                    <div class="w-[140px] h-[120px]">
                        <el-image :src="v.svg" />
                    </div>
                    <div class="font-bold mt-[25px]">{{ v.title }}</div>
                    <div class="text-[16px] mt-[15px]">{{ v.description }}</div>
                </div>
            </div>
        </div>
        <!-- 底部，3个盒子横排，内层限定宽度水平around居中，外层水平居中 -->
        <div class="text-[#dfdedf] mt-[30px] flex justify-center">
            <div class="flex flex-row justify-around w-[1400px]">
                <!-- 每个盒子内部竖排 -->
                <div class="flex flex-col justify-start items-center">
                    <div class="text-[#fff] font-bold mb-[20px]">文档</div>
                    <div class="hover:text-red-500 hover:underline cursor-pointer">简介</div>
                    <div class="mt-[7px] hover:text-red-500 hover:underline cursor-pointer">快速入门</div>
                    <div class="mt-[7px] hover:text-red-500 hover:underline cursor-pointer">更新日志</div>
                </div>
                <div class="flex flex-col justify-start items-center">
                    <div class="text-[#fff] font-bold mb-[20px]">社区</div>
                    <div class="hover:text-red-500 hover:underline cursor-pointer">Github</div>
                    <div class="mt-[7px] hover:text-red-500 hover:underline cursor-pointer">Twitter（推特）</div>
                    <div class="mt-[7px] hover:text-red-500 hover:underline cursor-pointer">Discord</div>
                </div>
                <div class="flex flex-col justify-start items-center">
                    <div class="text-[#fff] font-bold mb-[20px]">更多</div>
                    <div class="hover:text-red-500 hover:underline cursor-pointer">博客</div>
                    <div class="mt-[7px] hover:text-red-500 hover:underline cursor-pointer">Awesome</div>
                </div>
            </div>
        </div>
        <div class="pt-[60px] mb-[30px] flex flex-col justify-center items-center text-[#dfdedf]">
            <div class="w-[150px] h-[70px] flex items-center cursor-pointer">
                <el-image src="https://wails.io/zh-Hans/img/wails-logo-horizontal-dark.svg" />
            </div>
            <div>Copyright © 2022 Lea Anthony</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue"

const swiperList = ref([
    {
        url: "https://wails.io/zh-Hans/img/showcase/restic-browser-2.png"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/mac-app.png"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/ytd.webp"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/wombat.webp"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/wally.webp"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/october.webp"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/restic-browser-2.png"
    },
    {
        url: "https://wails.io/zh-Hans/img/showcase/mac-app.png"
    }
])

const introduceList = ref([
    {
        svg: "https://wails.io/zh-Hans/img/desktop-application-app.svg",
        title: "功能丰富",
        description: "使用菜单、对话框等原生 UI 元素构建全面的跨平台应用程序。"
    },
    {
        svg: "https://wails.io/zh-Hans/img/go_js_dark.svg",
        title: "技术熟悉",
        description: "使用您熟悉的技术来构建出色的应用程序。"
    },
    {
        svg: "https://wails.io/zh-Hans/img/Terminal-icon-dark.svg",
        title: "方便快捷",
        description: "使用Wails CLI快速生成、构建和打包项目。"
    }
])
</script>
